Aug 23, 2021 , with read , about 11min.

Vue深入组件 - 禁用Attributes继承

#Vue

attribute 和 property 的区别

property 和 attribute非常容易混淆，两个单词的中文翻译也都非常相近（property：属性，attribute：特性），但实际上，二者是不同的东西，属于不同的范畴。

property是DOM中的属性，是JavaScript里的对象；

attribute是HTML标签上的特性，它的值只能够是字符串；

简单理解，Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等。

而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。

@cnblog:lmjZone

有这样一个嵌套组件，父组件为：

<template>
  <div class="father-wrapper">
    <h1>father component</h1>
    <ChildComp/>
  </div>
</template>copy success

子组件为：

<template>
  <div class="child-wrapper">
    <h1>child component</h1>
    <div class="child-div">
      这是子组件中的div block
    </div>
  </div>
</template>copy success

为了看起来直观，加了少许样式，现在看起来就像这样：

如果，我们在<ChildComp /> 上加上一个Attribute ,如：

 <ChildComp attribute1="hello"/>copy success

会发现：

我们将attribute添加在了 div.child-wrapper 上, 这实际上符合我们的预期的。

但是究其原因，官方是这样解释的：

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。

这也是为什么组件可以接受任意的 attribute，而这些 attribute 会被添加到这个组件的根元素上。

@vue/doc:非-Prop-的-Attribute

意思就是说，在父组件中，如果你给一个子组件传递一个attribute（注意，这叫做非prop的Attribute）,那么attribute会被解析为html 属性作用到根元素，即div.child-wrapper , 它的表现就像是继承一样。

但是，有一个问题，如果某些场景下，你期望不让它默认的作用在根元素上 div.child-wrapper , 那该怎么办？
例如，我们需要加在 div.child-div上？

这是时候，我们需要做的就是：

禁用掉这样一种默认的作用规则；
在子组件中取得attribute变量，然后绑定在 div.child-div

实际上操作起来很简单:

禁止继承(禁止默认的作用规则):

export default {
  inheritAttrs: false,
    ...copy success

取得attribute 变量，绑定到指定元素上（自定义我们需要的作用规则）：
在vue中，可以通过this.$attrs 获取到所有的非prop的Attributes

<template>
  <div class="child-wrapper">
    <h1>child component</h1>
    <div class="child-div" v-bind="$attrs"> <!-- <--这里 -->
      这是子组件中的div block
    </div>
  </div>
</template>copy success

这就是禁用 Attribute 继承